<template>
	<label>
		<input :checked="checked" @click="clickRadio($event.target.checked)" type="checkbox">
		<div class="radio"></div>
	</label>
</template>
<script>
export default{
	name:'Radio',
	methods:{
		clickRadio(value){
			this.$emit('change', value)
		}
	},
	model: {
	   prop: 'checked',
	   event: 'change'
	 },
	props:{ checked: Boolean }
}
</script>
<style lang='less' scoped>
.radio {
	width: .5rem;
	height: .5rem;
	border-radius: 100%;
	border: 1px solid #aaa;
	display: inline-block;
	vertical-align: middle;
}
input:checked + .radio {
	background: url(../assets/img/common/radio.png) center;
	background-size: 100%;
}
input {
	display: none;
}
</style>